<template>
  <div>
    <Header/>
    <div class="body-main">
      <div class="userInfo-part">
        <div class="top-of-userInfo-part">
        </div>
        <ul class="userInfo-list">
          <li style="margin-left: 65px;margin-top: 20px"><h4 style="color: #19cdd3">用户中心</h4></li>
          <li style="margin-left: 65px;margin-top: 30px"><h4 style="font-weight: 700">个人资料</h4></li>
          <li style="margin-left: 65px;margin-top: 10px"><a class="myinfo">我的信息</a></li>
          <li style="margin-left: 65px;margin-top: 10px"><a class="myinfo">收货地址</a></li>
          <li style="margin-left: 65px;margin-top: 30px"><h4>我的交易</h4></li>
          <li style="margin-left: 65px;margin-top: 10px"><a class="myinfo" @click="changePage">订单管理</a></li>
          <li style="margin-left: 65px;margin-top: 10px"><a class="myinfo">我的评价</a></li>
        </ul>
      </div>
      <div class="detailed-info userinfo" :style="this.styleinfo">
        <img src="../assets/img/头像.jpg" alt=""
             style="width: 80px;height: 80px;border:1px solid black;border-radius: 50px;margin-top: 50px;margin-left: 50px">
        <h3>用户名</h3>
        <h3>电话</h3>
        <h3>签名</h3>
        <h3>电子邮件</h3>
        <h3>性别</h3>
        <h3>生日</h3>
      </div>
      <div class="detailed-info userorder" style="display: none"></div>
      <div class="detailed-info orderService" :style="this.styleorder">
        <div class="userImg-And-Name">
          <img src="../assets/img/头像.jpg" alt=""
               style="width: 100px;height: 100px;border:1px solid black;border-radius: 50px;margin-top: 25px;margin-left: 50px;float: left">
          <h2 style="float: left;margin-top: 40px;background-color: #19cdd3;font-weight: 400">zhangsan</h2>
        </div>
        <div style="overflow: hidden;background-color: white">
          <div class="of-icon">
            <el-icon @click="queryByStatus(1)"><shopping-cart style="background-color: white;cursor: pointer"/></el-icon>
          </div>
          <div class="of-icon">
            <el-icon @click="queryByStatus(2)"><shopping-bag style="background-color: white;cursor: pointer"/></el-icon>
          </div>
          <div class="of-icon">
            <el-icon @click="queryByStatus(3)"><ship style="background-color: white;cursor: pointer"/></el-icon>
          </div>

          <div class="of-icon">
            <el-icon @click="queryByStatus(4)"><chat-line-round style="background-color: white;cursor: pointer"/></el-icon>
          </div>
        </div>
        <a class="about-icon" style="margin-left: 116px;background-color: white;cursor: pointer" @click="queryByStatus(1)">待付款</a>
        <a class="about-icon" style="margin-left: 116px;background-color: white;cursor: pointer" @click="queryByStatus(2)">待发货</a>
        <a class="about-icon" style="margin-left: 116px;background-color: white;cursor: pointer" @click="queryByStatus(3)">待收货</a>
        <a class="about-icon" style="margin-left: 116px;background-color: white;cursor: pointer" @click="queryByStatus(4)">待评价</a>
        <div style="overflow:hidden;margin-top: 50px;background-color: white">
          <h5 style="float: left;margin-left: 67px">序号</h5>
          <h5 style="float: left;margin-left: 67px">订单商品</h5>
          <h5 style="float: left;margin-left: 67px">购买数量</h5>
          <h5 style="float: left;margin-left: 67px">时间</h5>
          <h5 style="float: left;margin-left: 67px">操作</h5>
        </div>
        <ul class="order">
          <li v-for="(c,index) in this.pageList" :key="index">
          <h5 style="float: left;margin-left: 67px;background-color: white">{{index+1}}</h5>
          <h5 style="float: left;margin-left: 85px;background-color: white">{{c.untitled.substring(0,c.untitled.length-1)}}</h5>
          <h5 style="float: left;margin-left: 67px;background-color: white">{{c.status}}
          <lable v-if="c.status=='1'">待付款</lable>
          <lable v-else-if="c.status=='2'">待发货</lable>
          <lable v-else-if="c.status=='3'">待收货</lable>
          <lable v-else-if="c.status=='4'">待评价</lable>
          <lable v-else-if="c.status=='5'">已完成</lable>
          <lable v-else-if="c.status=='6'">已关闭</lable>
          </h5>
          <h5 style="float: left;margin-left: 45px;background-color: white">{{c.createTime.substring(0,10)}}</h5>
          <h5 style="float: left;margin-left: 40px;background-color: white">
            <template v-if="c.status=='1'">
              <el-button type="success" round style="color: black">去支付</el-button>
              <el-button type="danger" round style="color: black">取消订单</el-button>
            </template>
            <template v-if="c.status == '2'">
              <el-button type="danger" round style="color: black">取消订单</el-button>
            </template>
            <template v-if="c.status == '3'">
              <el-button type="success" round style="color: black">确认收货</el-button>
            </template>
            <template v-if="c.status == '4'">
              <el-button type="success" round style="color: black">去评价</el-button>
            </template>
            <template v-if="c.status == '6'">
              <el-button type="success" round style="color: black">删除</el-button>
            </template>
          </h5>
          </li>
        </ul>
        <template v-if="this.status == null">
          <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="5"
                         style="margin-left: 50px;margin-top: 10px;background-color: white" :current-page="pageNum" @next-click="next"
                         @prev-click="prev" @current-change="pager">
          </el-pagination>
        </template>
        <template v-if="this.status != null">
          <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="5"
                         style="margin-left: 50px;margin-top: 10px;background-color: white" :current-page="pageNum" @next-click="next"
                         @prev-click="prev" @current-change="pager">
          </el-pagination>
        </template>

      </div>
      <div class="detailed-info userCommon" style="display: none"></div>
      <div class="calendar">
        <div class="calendar-top">
          我的日历{{ this.date }}
        </div>
        <div style="margin-left: 115px;margin-top: 30px;font-size: 60px;color:#01ccb3;background-color:#edfffb">{{this.day}}</div>
      </div>
    </div>
    <LoginFooter/>
  </div>
</template>
<script>
import Header from "../components/Header";
import LoginFooter from "../components/LoginFooter";
import {publicFun} from "../mixin";
import {ShoppingCart,ShoppingBag,Ship,ChatLineRound} from '@element-plus/icons-vue';
export default {
  name: "OnwerIndex",
  components: {
    Header, LoginFooter,ShoppingCart,ShoppingBag,Ship,ChatLineRound
  },
  data() {
    return {
      date: "",
      year: null,
      month: null,
      day: null,
      dayName: null,
      styleinfo: "",
      styleorder: "display:none",
      limit:5,
      pageNum:1,
      orders:[],
      count:0,
      total:0,
      pageList:[],
      status:null,
      userId:null,
      status1:false,
      status2:false,
      status3:false,
      status4:false,
    }
  },
  methods: {
    getDate() {
      var time = new Date()
      console.log(time)

      this.year = time.getFullYear() //获取年份
      this.month = time.getMonth() //获取月份
      this.day = time.getDate() //获取日期
      console.log(this.dayName)
      console.log(this.day)
      this.date = `${this.year}-${this.month}-${this.day}`

    },
    checkThePage(event) {
      var index = event.srcElement.dataset.index;
      console.log(index)
    },
    changePage() {
      this.styleinfo = "display:none"
      this.styleorder = ""
    },
    pager(currentPage){
      this.pageNum = currentPage
      var userId = this.getCookieValue("userId")
      if(this.status==null){
      this.$axios.get("api/OrderService/list",{
        params:{
          userId:userId,
          pageNum:this.pageNum,
          limit:this.limit
        }
      }).then((res)=>{
        if(res.data.code == 201)
        {
          this.orders = res.data.data
          this.count = res.data.data.count
          this.total = this.count
          this.pageList = res.data.data.list
        }
      })}
      else{
        this.$axios.get("api/OrderService/list",{
          params:{
            userId:this.userId,
            pageNum:this.pageNum,
            limit:this.limit,
            status:this.status
          }
        }).then((res)=>{
          if(res.data.code == 201)
          {
            this.orders = res.data.data
            this.count = res.data.data.count
            this.total = this.count
            this.pageList = res.data.data.list
          }
        })
      }
    }
    ,next() {
      this.pageNum = this.pageNum + 1;
    },
    prev() {
      this.pageNum = this.pageNum - 1;
    },
    getOrderList(){
      var userId = this.getCookieValue("userId")
      this.$axios.get("api/OrderService/list",{
        params:{
          userId:userId,
          pageNum:this.pageNum,
          limit:this.limit
        }
      }).then((res)=>{
        if(res.data.code == 201)
        {
          this.orders = res.data.data
          this.count = res.data.data.count
          this.total = this.count
          this.pageList = res.data.data.list
        }
      })
    },
    queryByStatus(status){
      this.userId = this.getCookieValue("userId")
      if(status == '1' && this.status == null)
      {
        this.status =status
        this.$axios.get("api/OrderService/list",{
          params:{
            userId:this.userId,
            pageNum:this.pageNum,
            limit:this.limit,
            status:this.status
          }
        }).then((res)=>{
          if(res.data.code == 201)
          {
            this.orders = res.data.data
            this.count = res.data.data.count
            this.total = this.count
            this.pageList = res.data.data.list
          }
        })
      }else if(status == '2' && (this.status=='1'||this.status=='3'||this.status=='4' || this.status == null)){
        this.status =status
        this.$axios.get("api/OrderService/list",{
          params:{
            userId:this.userId,
            pageNum:this.pageNum,
            limit:this.limit,
            status:this.status
          }
        }).then((res)=>{
          if(res.data.code == 201)
          {
            this.orders = res.data.data
            this.count = res.data.data.count
            this.total = this.count
            this.pageList = res.data.data.list
          }
        })
      }else if(status == '3'&& (this.status=='1'||this.status=='2'||this.status=='4' || this.status == null))
      {
        this.status =status
        this.$axios.get("api/OrderService/list",{
          params:{
            userId:this.userId,
            pageNum:this.pageNum,
            limit:this.limit,
            status:this.status
          }
        }).then((res)=>{
          if(res.data.code == 201)
          {
            this.orders = res.data.data
            this.count = res.data.data.count
            this.total = this.count
            this.pageList = res.data.data.list
          }
        })
      }else if(status == '4'&& (this.status=='1'||this.status=='2'||this.status=='3' || this.status == null))
      {
        this.status =status
        this.$axios.get("api/OrderService/list",{
          params:{
            userId:this.userId,
            pageNum:this.pageNum,
            limit:this.limit,
            status:this.status
          }
        }).then((res)=>{
          if(res.data.code == 201)
          {
            this.orders = res.data.data
            this.count = res.data.data.count
            this.total = this.count
            this.pageList = res.data.data.list
          }
        })
      }else{
        this.status = null
        this.getOrderList()
      }
    }

  },
  mounted() {
    this.getDate()
    this.getOrderList()
  },
  mixins:[publicFun],
}
</script>

<style scoped>
* {
  background-color: #f7fdfd;
}
.about-icon:hover{
  color: #01ccb3;
}
.of-icon{
  float: left;
  background-color: white;
  font-size: 50px;
  margin-left: 115px;
}
.order>li{
  width: 770px;
  height: 60px;
  /*border: 1px solid black;*/
  /*background-color: #ff7b7b;*/
  border-bottom: 1px solid #e7e7e7;
  text-align: center;
  line-height: 60px;
  background-color: white;
}
.order{
  display: block;
  list-style: none;
  width: 770px;
  height: 300px;
  /*border: 1px solid black;*/
  margin-top: 20px;
  border-top: 1px solid #e7e7e7;
  background-color: white;
  /*border-left: 1px solid black;*/
  /*border-right: 1px solid black;*/
}
.of-icon:hover{
  color: #01ccb3;
}

.userImg-And-Name {
  width: 770px;
  height: 150px;
  background-color: #19cdd3;
}

.calendar-top {
  width: 300px;
  height: 50px;
  background-color: #19cdd3;
  text-align: center;
  line-height: 50px;
  font-size: 15px;
  color: white;
}

.myinfo:hover {
  color: #70bfc2;
  cursor: pointer;
}

.userInfo-list > li > a {
  background-color: white;
}

.userInfo-list > li > h4 {
  background-color: white;
}

.userInfo-list > li {
  display: block;
  background-color: white;
}

.userInfo-list {
  display: block;
  list-style: none;
  background-color: white;
}

.top-of-userInfo-part {
  width: 200px;
  height: 8px;
  background-color: #19cdd3;
}

.body-main {
  width: 1300px;
  height: 800px;
  border: 1px solid #e7e7e7;
  margin-top: 100px;
}

.userInfo-part {
  width: 200px;
  height: 400px;
  border: 1px solid #e7e7e7;
  margin-left: 0px;
  float: left;
  background-color: white;
}

.detailed-info {
  width:770px;
  height: auto;
  border: 1px solid #e7e7e7;
  float: left;
  margin-left: 12px;
  background-color: white;
}

.calendar {
  width: 300px;
  height: 200px;
  border: 1px solid #e7e7e7;
  float: left;
  margin-left: 12px;
  background-color: #edfffb;
}
</style>